<template>
 <div class="cart">
    <main>
      <ul class="content">
        <!-- 购物车里的数据只是goodslist里的数据 -->
        <li v-for="item in carList" :key="item.shopdata.id">
          <input
            type="checkbox"
            @change="check(item.shopdata.id)"
            :checked="item.flag"
          />
          <!-- change事件！-->
          <img :src="item.shopdata.cover" />
          <div class="con">
            <h4>{{ item.shopdata.name }}</h4>
            <div class="opera">
              <b>￥{{ item.shopdata.price }}</b>
              <div class="operas">
                <button @click="minus(item.shopdata.id)">-</button>
                <!-- 数量的加减  不要忘了这个数 -->
                <span>{{ item.count }}</span>
                <button @click="plus(item.shopdata.id)">+</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="total">
         <label>
           <input type="checkbox">
           全选
           </label>
        <p>合计：<b>￥</b></p>
        <button>去结算</button>
      </div>
    </main>
 </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  methods: {
    ...mapActions(['onCarList']),
    ...mapMutations(["minus", "plus", "check",]),
  },
  mounted(){
    this.onCarList()
  },
  computed: {
    ...mapState(["carList"]),
    ...mapGetters(['get','sum'])
  },
};
</script>

<style lang='scss'>
.cart {
 
  main {
    overflow-y: auto;
    .content {
      li{
        display: flex;
        justify-content: space-around;
        margin: 10px 0;
        background: #fff;
        img{
          width: 100px;
        }
        p{
          color: #ccc;
          line-height: 30px
        }
        .opera{
          display: flex;
          justify-content: space-between;
          align-items: center;
          b{
            color: rgb(236, 13, 13);
          }
          span{
            margin: 0 15px;
          }
          button{
            background: #fff;
            border: 0;
          }
        }
      }
    }
    .total {
      width: 100%;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      background: #fff;
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 50px;
      padding-left:5px;
      p{
        b{
          color: rgb(236, 13, 13);
        }
      }
      button{
            background: rgb(236, 13, 13);
            border: 0;
            color: #fff;
            padding: 3px 8px;
          }
    }
  }
}
</style>
